<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>请填写发票信息</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/js/invoice.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        $(function () {
            let op = [[${options}]];
            for (let i = 0; i < 3; i++) {
                $("#item-select-" + i).change(() => {
                    $.each(op, (idx, v) => {
                        if (v.value === $("#item-select-" + i).val()) {
                            $("#item-code-" + i).val(v.code);
                            $("#item-num-" + i).val(v.num);
                            $("#item-norm-" + i).val(v.norm);
                            $("#item-amount-" + i).val(v.amount);
                            compute();
                            return false;
                        }
                    });
                });

                $("#item-num-" + i).bind('input propertychange', () => {
                    let m = $("#item-num-" + i).val();
                    let s = $("#item-select-" + i).val();
                    if (!!s) {
                        $.each(op, (idx, v) => {
                            if (v.value === s) {
                                $("#item-amount-" + i).val(m * v.amount);
                                compute();
                                return false;
                            }
                        });
                    }
                });
            }
        });
    </script>
</head>
<body>
<div class="invoiceMain">
    <form onsubmit="return ajaxSubmit()">
        <div class="invoiceHeader">
            <ul class="headerLeft">
                <li><label>征收大厅编码:</label><span></span></li>
                <li><label>执手单位编码:</label><span></span></li>
                <li><label>执收单位名称:</label><span></span></li>
            </ul>
            <div class="headerMiddle">
                <h1>XX增值税专用发票</h1>
                <div class="line"></div>
                <p class="date" th:text="${date}"></p>
            </div>
            <ul class="headerRight"></ul>
        </div>
        <div class="invoiceBody">
            <div class="userInfo">
                <div class="payer">付款人</div>
                <ul>
                    <li class="bottom-line">
                        <label class="right-line" for="payer-name">全&nbsp;&nbsp;&nbsp;&nbsp;称</label>
                        <input id="payer-name" type="text"/>
                    </li>
                    <li class="bottom-line">
                        <label class="right-line" for="payer-account">账&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                        <input id="payer-account" type="text"/>
                    </li>
                    <li>
                        <label class="right-line" for="payer-bank">开户银行</label>
                        <input id="payer-bank" type="text"/>
                    </li>
                </ul>
                <div class="payee">收款人</div>
                <ul>
                    <li class="bottom-line">
                        <label class="right-line" for="payee-name">全&nbsp;&nbsp;&nbsp;&nbsp;称</label>
                        <input id="payee-name" type="text"/>
                    </li>
                    <li class="bottom-line">
                        <label class="right-line" for="payee-account">账&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                        <input id="payee-account" type="text"/>
                    </li>
                    <li>
                        <label class="right-line" for="payee-bank">开户银行</label>
                        <input id="payee-bank" type="text"/>
                    </li>
                </ul>
            </div>
            <div>
                <table class="itemTable">
                    <tr style="text-align: center" class="bottom-line no-right-line">
                        <td style="width: 35%">收入项目</td>
                        <td style="width: 15%">编码</td>
                        <td style="width: 15%">数量</td>
                        <td style="width: 15%">收缴标准</td>
                        <td style="width: 20%" class="no-right-line">金额</td>
                    </tr>
                    <tr th:each="i:${#numbers.sequence(0,2)}" class="bottom-line no-right-line">
                        <td>
                            <label>
                                <select th:id="'item-select-' + ${i}" class="item-select">
                                    <option value="" selected>-- 请选择 --</option>
                                    <option th:each="op:${options}" th:value="${op.value}"
                                            th:text="${op.value}"></option>
                                </select>
                            </label>
                        </td>
                        <td>
                            <label>
                                <input th:id="'item-code-' + ${i}" class="item-input" type="text" readOnly="readonly"/>
                            </label>
                        </td>
                        <td>
                            <label>
                                <input th:id="'item-num-' + ${i}" class="item-input" type="text"/>
                            </label>
                        </td>
                        <td>
                            <label>
                                <input th:id="'item-norm-' + ${i}" class="item-input" type="text" readOnly="readonly"/>
                            </label>
                        </td>
                        <td class="no-right-line">
                            <label>
                                <input th:id="'item-amount-' + ${i}" class="item-input" type="text"/>
                            </label>
                        </td>
                    </tr>
                    <tr class="total">
                        <td colspan="5">
                            <label>金额(大写)<input id="amount-upper" class="amount-input" style="width: 60%"
                                                type="text"></label>
                            <label>(小写)<input id="amount-lower" class="amount-input" type="text"></label>
                        </td>
                    </tr>
                    <tr class="stamp">
                        <td colspan="2">
                            <p>执收单位(盖章)</p>
                            <p style="height: 40px"></p>
                            <p style="text-align: center">经办人(盖章)</p>
                        </td>
                        <td colspan="3" class="no-right-line">
                            <p style="height: 95%">备注:</p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="toolbar">
            <input type="reset" value="重置"/>
            <input style="background: lightskyblue" type="submit" value="保存"/>
        </div>
    </form>
</div>
</body>
</html>
